<template>
  <div ref="barChart" style="width: 100%; height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'BarChart',
  data() {
    return {
      // ECharts 配置
      option: {
        textStyle: {
          color: '#fff' // 全局文字颜色
        },
        legend: {
          data: ['生产绩效'],
          textStyle: {
            color: '#fff', // 设置文字颜色为白色
            fontSize: 16 // 设置文字大小
          }
        },
        xAxis: {
          type: 'category',
          data: ['8日04时', '8日06时', '8日08时', '8日10时', '8日12时', '8日14时', '8日16时', '8日18时'],
          axisLabel: {
            color: '#fff' // X轴文字颜色
          }
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              color: '#fff'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            name: '产能',
            nameTextStyle: {
              color: '#fff',
              fontSize: 14
            },
            min: 0,
            max: 300,
            interval: 50
          },
          {
            type: 'value',
            axisLabel: {
              color: '#fff',
              formatter: function (value) {
                return value + '%';
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            position: 'right',
            name: '达成率',
            nameTextStyle: {
              color: '#fff',
              fontSize: 14
            },
            min: 0,
            max: 300,
            interval: 50
          }
        ],
        series: [
          {
            name: '生产绩效', // 添加 name 属性，与 legend 的 data 对应
            data: [120, 200, 150, 80, 70, 110, 130, 300],
            type: 'bar',
            itemStyle: {
              color: '#00d7fa' // 设置柱子颜色
            },
            label: {
              show: true,
              color: '#fff'
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 初始化 ECharts 实例
      const chart = echarts.init(this.$refs.barChart);
      // 设置图表配置项
      chart.setOption(this.option);
    }
  }
};
</script>

<style scoped>
/* 可选的样式 */
</style>